<template>
  <el-table :data="list" border style="width: 100%">
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="nickname" label="渠道名称" />
    <el-table-column prop="company" label="公司名称" />
    <el-table-column prop="key" label="加密key" />
    <el-table-column label="操作" width="200px" align="center">
      <template slot-scope="{ row }">
        <el-button type="primary" plain size="mini" @click="handleEdit(row)">编辑</el-button>
        <el-button type="danger" plain size="mini"  @click="handleDelete(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { deleteChannel } from '@/api/channel/index'
export default {
  name: 'ChannelTable',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleDelete(id) {
      console.log('handleDelete')
      this.$confirm('是否确定删除渠道?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteChannel(id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleEdit(row) {
      console.log(row)
      const { id, company, nickname } = row
      this.$router.push({
        name: 'ChannelCreate',
        params: {
          type: 'edit',
          id,
          nickname,
          company
        }
      })
    },
    async deleteChannel(id) {
      console.log(id)
      const { code } = await deleteChannel({ id })
      if (code !== 200) return
      this.$message.success('删除成功')
      this.$parent.getChannelList()
    }
  }
}
</script>
